<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>开心Go</title>
    <meta name="keywords" content="商城" />
    <meta name="description" content="商城" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/amazeui.min.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="css/home.css">
    <!-- 引入底部图标 -->
    <link rel="stylesheet" href="./css/buttom_button.css">
    <!-- 引入vue.js -->
    <script src="./js/vue.js"></script>

</head>

<body>
    <header data-am-widget="header" class="am-header am-header-default s-header">
        <!-- 搜索框 -->
        <h1 class="am-header-title">
            <input type="text" class="header-search" placeholder="请输入搜索的关键词" />
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="index.html" class=""> <i class="iconfont">&#xe601;</i> </a>
        </div>
    </header>

    </script>
    <div class="jl"></div>
    <!-- 引入vant、vue -->
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <!-- 盒子 -->
    <div id="container">
        <!-- 轮播图 -->
        <div class="swipper-box">
            <!-- 使用vant有赞上的轮播图组件 -->
            <van-swipe :autoplay="3000" indicator-color="white">
                <!-- 刷新时间底色 -->
                <van-swipe-item>
                    <img src="./images/swipe (1).jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="./images/swipe (2).jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="./images/swipe (3).jpg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="./images/swipe (4).jpg" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="title">超值购</div>
        <div class="goshop">
            <div class="goshop-left fl">

                <a href="default.htm"><img src="images/pic.jpg" /></a>
            </div>
            <div class="goshop-right fr">
                <div class="goshop-right-top">
                    <a href="default.htm"><img src="images/pic1.jpg" /></a>
                </div>
                <div class="goshop-right-bot">
                    <a href="default.htm"><img src="images/pic2.jpg" /></a>
                </div>
            </div>
        </div>
        <div class="title">品牌街</div>
        <div class="goshop">
            <div class="goshop-left fl">
                <a href="default.htm"><img src="images/pic5.jpg" /></a>
            </div>
            <div class="goshop-right fr">
                <div class="goshop-right-top">
                    <a href="default.htm"><img src="images/pic3.jpg" /></a>
                </div>
                <div class="goshop-right-bot">
                    <a href="default.htm"><img src="images/pic4.jpg" /></a>
                </div>
            </div>
        </div>
        <div class="title">主题馆</div>
        <ul class="menulist">
            <li>
                <a href="html/clothes.html">
                    <div class="menulist-left fl">
                        <h2>女装</h2>
                        <p>女神必备</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t1.jpg" />
                    </div>
                </a>
            </li>
            <li>
                <a href="html/sale.html">
                    <div class="menulist-left fl">
                        <h2>ZARA</h2>
                        <p>品牌专场</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t2.jpg" />
                    </div>
                </a>
            </li>
            <li>
                <a href="default.htm">
                    <div class="menulist-left fl">
                        <h2>男鞋</h2>
                        <p>户外运动</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t3.jpg" />
                    </div>
                </a>
            </li>
            <li>
                <a href="default.htm">
                    <div class="menulist-left fl">
                        <h2>女包</h2>
                        <p>青春靓丽</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t4.jpg" />
                    </div>
                </a>
            </li>
            <li>
                <a href="html/jewel.html">
                    <div class="menulist-left fl">
                        <h2>首饰</h2>
                        <p>金银珠宝</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t5.jpg" />
                    </div>
                </a>
            </li>
            <li>
                <a href="html/makeup.html">
                    <div class="menulist-left fl">
                        <h2>化妆品</h2>
                        <p>女神必备</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t6.jpg" />
                    </div>
                </a>
            </li>
            <li>
                <a href="html/food.html">
                    <div class="menulist-left fl">
                        <h2>零食</h2>
                        <p>折扣专享</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t7.jpg" />
                    </div>
                </a>
            </li>
            <li>
                <a href="html/jiaju.html">
                    <div class="menulist-left fl">
                        <h2>家电</h2>
                        <p>潮流必备</p>
                    </div>
                    <div class="menulist-right fr">
                        <img src="images/t8.jpg" />
                    </div>
                </a>
            </li>
        </ul>
        <div class="title">猜你喜欢</div>
        <div class="goods-list">
            <ul>
                <li v-for="(good,index) in aaa" v-on:click="jumpDetail(good)">
                    <img v-bind:src="good.url" alt="">
                    <p class="title">{{good.name}}</p>
                    <p class="price">
                        <span>￥{{good.price}}</span>
                        <em>￥{{good.originPrice}}</em>
                    </p>
                </li>
            </ul>
        </div>
        <!--商品列表 end-->

        <!--底部导航 start-->
        <div data-am-widget="navbar" class="am-navbar  gm-foot am-no-layout" id="">
            <ul class="am-navbar-nav am-cf am-avg-sm-5">
                <li class="curr">
                    <a href="index.html" class="curr">
                        <span class="iconfont icon-home"></span>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="html/search.html" class="">
                        <span class="iconfont icon-search"></span>
                        <p>搜索</p>
                    </a>
                </li>
                <li>
                    <a href="html/category.html" class="">
                        <span class="iconfont icon-kind"></span>
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="html/shopcar.html" class="">
                        <span class="iconfont icon-car"></span>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="html/member.html" class="">
                        <span class="iconfont icon-mine"></span>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>

    </div>
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.3.3/lib/vant.min.js"></script>
    <script src="./js/SHA1.js"></script>
    <script src="./js/axios.min.js"></script>
    <!--将es6转换为es5-->
    <script src="./js/es6-promise.auto.min.js"></script>
    <script>
        var now = Date.now();
        var appKey = SHA1("A6012109240222" + "UZ" + "9781AF5E-E90A-FF6A-65DF-085A3BDFE28F" + "UZ" + now) + "." + now

        var vm = new Vue({
            el: "#container",
            data: {
                aaa: []

            },
            created: function() {
                this.getGoodList()

            },
            methods: {
                onClickIcon: function() {
                    alert("1")
                },
                onClickButton: function() {
                    alert("2")
                },

                jumpDetail: function(item) {
                    window.location.href = "detail.html?id=" + item.id
                },
                getGoodList: function() {
                    var _this = this;
                    axios.get('https://d.apicloud.com/mcm/api/aaa', {
                            headers: {
                                "X-APICloud-AppId": "A6012109240222",
                                "X-APICloud-AppKey": appKey
                            }
                        })
                        .then(function(response) {
                            _this.aaa = response.data;
                            console.log(response.data);
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            }
        })
    </script>
    <script src="./js/vue.js"></script>
</body>

</html>